<template>
  <div class="chart">
    <!-- 单独的 -->
    <div
      class="circle-chart-item"
      :key="index"
      v-for="(item, index) in circelData"
    >
      <div class="item-top">
        <el-progress
          type="circle"
          :stroke-width="8"
          :percentage="item.percentage"
          :show-text="false"
          :width="90"
          :status="item.status ? item.status : null"
        ></el-progress>
        <span class="item-text">{{ item.text }}</span>
      </div>
      <span class="item-bottom">{{ item.name }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tj-circle',
  props: {
    circelData: {
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
// 底部的三个circle
.chart {
  display: flex;
  margin-top: 20px;
  justify-content: space-around;
  .circle-chart-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    .item-top {
      position: relative;
      .item-text {
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        z-index: 10;
      }
    }
    .item-bottom {
      margin-top: 10px;
      display: block;
      height: 15px;
      text-align: center;
    }
  }
}
</style>
